<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="back">回到上一页</button>
    <dev v-for="(item, index) in list" :key="index">{{convertDict(dict, 'type-a', item)}}</dev>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  name: 'About',
  setup () {
    let router = useRouter()
    let route = useRoute()
    let list = ref([1, 3, 5])
    let dict = ref({
      'type-a':
      {
        1: { itemValue: 5 },
        2: { itemValue: 10 }
      },
      'type-b':
      {
        a: { itemValue: 'A' },
        b: { itemValue: 'B' }
      }
    })
    let convertDict = (dict, dictCode, item) => {
      if (item == null || typeof (reValue) == undefined || item == '') {
        return ''
      }

      let arr = dict[dictCode]
      if (arr[item] != null) {
        return arr[item].itemValue
      }
      console.log('未知的字典数据: ', dictCode, item)
      return ''
    }
    // query传递的参数都是字符串类型
    console.log(route.query);
    console.log(route.params);
    let back = () => {
      router.back() // router.go(-1)
      // router.forward() // router.go(1)
    }
    return {
      back,
      dict,
      list,
      convertDict
    }
  }
})
</script>
